<template>
  <el-dialog :visible.sync="visible" title="详情" width="30%" append-to-body>
    <el-row :gutter="20">
      <el-col :span="12" class="money">
        <div class="label">上传时间：</div>
        <div :class="['content', renderData(detailData.createTime).class]">{{ renderData(detailData.createTime).text }}</div>
      </el-col>
      <el-col :span="12" class="money">
        <div class="label">上传用户：</div>
        <div :class="['content', renderData(detailData.userName).class]">{{ renderData(detailData.userName).text }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="money">
        <div class="label">审核状态：</div>
        <div :class="['content', renderData(auditState[detailData.auditState]).class]">{{ renderData(auditState[detailData.auditState]).text }}</div>
      </el-col>
      <el-col :span="12" class="money">
        <div class="label">审核用户：</div>
        <div :class="['content', renderData(detailData.auditUserName).class]">{{ renderData(detailData.auditUserName).text }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="money" v-if="detailData.auditState != 0">
        <div class="label">审核时间：</div>
        <div :class="['content', renderData(detailData.auditTime).class]">{{ renderData(detailData.auditTime).text }}</div>
      </el-col>
      <!-- <el-col :span="12" class="money" v-if="detailData.auditState == 2">
        <div class="label">审核意见：</div>
        <div :class="['content', renderData(detailData.auditDesc).class]">{{ renderData(detailData.auditDesc).text }}</div>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="money" v-if="detailData.auditState == 2">
        <div class="label2">审核意见：</div>
        <div :class="['content2', renderData(detailData.auditDesc).class]">{{ renderData(detailData.auditDesc).text }}</div>
      </el-col>
    </el-row>
    
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      detailData: []
    }
  },
  computed: {
    auditState() {
      return {
        0: '待审核',
        1: '审核通过',
        2: '被驳回'
      }
    },
    noData() {
      return '暂无数据'
    }
  },
  methods: {
    open(data) {
      // this.detailData = data;
      this.visible = true;
      this.getData(data)
    },
    getData(item) {
      // console.log(item, 'detail')
      this.$httpApi.getDocuments(item.id).then((res) => {
        console.log(res, 'res')
        if(res.success) {
          this.detailData = res.data;
        } else {
          this.$message.error('获取详情失败');
        }
        
      })
    },
    renderData(value) {
      if (!value) {
        return { text: '暂无数据', class: 'no-data' };
      }
      return { text: value, class: '' };
    },
  }
}
</script>

<style scoped>
.money {
  display: flex;
  /* margin-bottom: 10px; */
  padding: 10px;
}
.label {
  flex: 1;
  font-weight: 700;
}
.content {
  flex: 2;
}
.label2 {
  flex: 1;
  font-weight: 700;
}
.content2 {
  flex: 5;
  line-height: 1.8;
  letter-spacing: 2px;
}
.no-data {
  color: red;
  font-style: italic;
  font-size: 12px;
}
</style>